<template>
	<div class="rencent flex">
		<p>近期最受期待</p>
		<div class="rencentFilmContainer flex">
			<div v-for="item in list.movieList" class="rencentFilm">
				<div class="rfc">
					<div class="rfc-img">
						<img :src="item.img"/>
						<p class="filmWish">{{item.wish}}人想看</p>
					</div>
					<p class="filmName">{{item.nm}}</p>
					<p class="filmDay">{{item.rt}}</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'recent',
	props: {
	   msg: String
	},
	props:["lists"],
	data(){
		return {
			list:[]
		}
	},
	mounted(){
		this._initData();
		console.log("mounted");
	},
	methods:{
		_initData(){
			return new Promise((resolve,reject)=>{
				var xhr = new XMLHttpRequest();
				xhr.open('GET','https://www.easy-mock.com/mock/5bd16f236f8ddc4c4d42c441/vue-maoyan/filmData');
				xhr.send();
				xhr.addEventListener("readystatechange",function(){
					if(xhr.readyState == 4){
						if(xhr.status == 200){
							resolve(xhr.response)
						}
					}
				})
			}).then((res)=>{
					this.list=JSON.parse(res);
					console.log("ajax请求成功：",this.list);
				})
		},
		//判断是否上演同步按钮

	},
}
</script>

<style lang="scss">
	@import "../scss/common";
	.rencent{
		width: 100%;
		height: r(360px);
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: white;
		p{
			font-size: r(26px);
			width: 91%;
			padding: r(12px) r(0px);
		}
		.rencentFilmContainer{
			flex-direction: row;
			overflow: scroll;
			width:91%;
			height:90%;
			margin-bottom: r(20px);
			.rfc{
				width: r(145px);
				height: r(280px);
				margin-right:r(20px);
				.rfc-img{
					width: 100%;
					height: r(200px);
					position: relative;
					img{
						width: 100%;
						height: 100%;
					}
					.filmWish{
						position: absolute;
						left: 0;
						bottom: 0;
						font-size: r(19px);
						font-weight: bold;
						color: #faaf00;
						padding: 0;
					}
				}
				.filmName,.filmDay{
					font-size: r(22px);
					overflow: hidden;
					height: r(14px);
				}
				
			}
		}	
	}
</style>